<template>
  <div class="api-usage-example">
    <h3>API 使用示例</h3>
    
    <div class="example-section">
      <h4>登录示例</h4>
      <el-button @click="handleLogin" type="primary">测试登录</el-button>
      <pre v-if="loginResult">{{ JSON.stringify(loginResult, null, 2) }}</pre>
    </div>
    
    <div class="example-section">
      <h4>获取菜单示例</h4>
      <el-button @click="handleGetMenus" type="success">获取菜单</el-button>
      <pre v-if="menusResult">{{ JSON.stringify(menusResult, null, 2) }}</pre>
    </div>
    
    <div class="example-section">
      <h4>获取智能体示例</h4>
      <el-button @click="handleGetAgents" type="info">获取智能体</el-button>
      <pre v-if="agentsResult">{{ JSON.stringify(agentsResult, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { login } from '@/api/auth';
import { getMenuNav, getAgentList } from '@/api/system';
import type { LoginResponse, MenuItem, AgentListResponse } from '@/types/api';

const loginResult = ref<LoginResponse | null>(null);
const menusResult = ref<MenuItem[] | null>(null);
const agentsResult = ref<AgentListResponse | null>(null);

// 登录示例
const handleLogin = async () => {
  try {
    const response = await login({
      username: 'admin',
      password: 'password123',
      uuid: 'test-uuid'
    });
    
    // 类型安全的访问响应数据
    if (response.result?.code === 0) {
      loginResult.value = response.result.data;
      console.log('登录成功，token:', response.result.data?.token);
    } else {
      console.error('登录失败:', response.result?.msg);
    }
  } catch (error) {
    console.error('登录请求失败:', error);
  }
};

// 获取菜单示例
const handleGetMenus = async () => {
  try {
    const response = await getMenuNav();
    
    if (response.result?.code === 0) {
      menusResult.value = response.result.data;
      console.log('菜单数据:', response.result.data);
      
      // 类型安全的遍历菜单
      response.result.data?.forEach((menu: MenuItem) => {
        console.log(`菜单: ${menu.title}, 路径: ${menu.path}`);
      });
    }
  } catch (error) {
    console.error('获取菜单失败:', error);
  }
};

// 获取智能体示例
const handleGetAgents = async () => {
  try {
    const response = await getAgentList();
    
    if (response.result?.code === 0) {
      agentsResult.value = response.result.data;
      console.log('智能体数据:', response.result.data);
      
      // 类型安全的访问智能体列表
      const agents = response.result.data?.list || [];
      agents.forEach(agent => {
        console.log(`智能体: ${agent.name}, API Key: ${agent.keyStr}`);
      });
    }
  } catch (error) {
    console.error('获取智能体失败:', error);
  }
};
</script>

<style scoped>
.api-usage-example {
  padding: 20px;
}

.example-section {
  margin-bottom: 30px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
}

.example-section h4 {
  margin-top: 0;
  color: #409eff;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
  font-size: 12px;
  margin-top: 10px;
}

.el-button {
  margin-right: 10px;
}
</style>